<template>
    <div class="com-container" @dblclick="removeProvinMap">
        <div class="com-chart" ref="ref_map"></div>
    </div>
</template>
<script>
import axios from 'axios';
// 导入getProvinceMapInfo
import { getProvinceMapInfo } from '../utils/map_utils'
export default {
    name:'comMap',
    data(){
        return{
            chartInstance:null, //初始化echarts的对象
            allData:null,//服务器请求回来的数据
            saveData:[], //判断此数据是否存在
        }
    },
    created(){
        this.$socket.registerCallBack('mapData',this.getData);
    },
    mounted(){
        this.initChart();
        // this.getData();
        this.$socket.send({
            action:'getData',
            socketType:'mapData',
            chartName:'map',
            value:''
        })
        window.addEventListener('resize',this.screenAdapter);
        this.screenAdapter();
    },
    // 组件销毁
    destroyed(){
        // 移出window.addEventListener('resize',this.updateAdapter);
        window.removeEventListener('resize',this.screenAdapter);
        // 注销回调函数
        this.$socket.unRegisterCallBack('mapData');
    },
    methods:{
        // 定义初始化图表的方法initChart()
        async initChart(){
            this.chartInstance = this.$echarts.init(this.$refs.ref_map,'chalk');
            // 请求数据库数据
            const { data:ret } = await axios.get('http://localhost:8082/static/map/china.json')
            this.$echarts.registerMap('china',ret)
            // 拆分option配置项
            const initOption = {
                geo:{
                    type:'map',
                    map:'china',
                    top:'5%',
                    bottom:'5%',
                    itemStyle:{
                        areaColor:'#2e72bf',
                        borderColor:'#333'
                    }
                }
            }
            this.chartInstance.setOption(initOption)
            /*
                显示点击省份，显示省份地图的步骤：
                    1.绑定点击事件
                    2.根据路径请求后端数据
                    3.注册geo
                    4.回到全国地图
            */
            // 绑定事件
            this.chartInstance.on('click',async args=>{
                const name = args.name;
                const { path,key } = getProvinceMapInfo(name);
                // 发起请求
                if(!key){
                    return;
                }else{
                    if(!this.saveData[key]){
                        const provinceData = await axios.get('http://localhost:8082' + path);
                        const ret = provinceData.data
                        this.saveData[key] = ret
                        // 注册地图
                        this.$echarts.registerMap(key,ret);
                    }
                    
                    const provinceOption = {
                        geo:{
                            map:key
                        }
                    }
                    // 设置地图配置
                    this.chartInstance.setOption(provinceOption)
                }
            })
        },
        // 获取数据
        getData(ret){
            // const { data:ret } = await this.$http('map');
            this.allData = ret;
            this.updateChart();
        },
        // 更新图表方法updateChart()
        updateChart(){
            // 获取图例数据
            const legendArr = this.allData.map(item => item.name);
            // 获取seriesArr数据
            const seriesArr = this.allData.map(item =>{
                return{
                    type:'effectScatter',
                    // 设置涟漪效果
                    rippleEffect:{
                        scale:5,
                        brushType:'stroke'
                    },
                    name:item.name,
                    data:item.children,
                    coordinateSystem:'geo' //必须配置这个要不然effectScatter无法显示
                }
            })
            // 数据配置项
            const dataOption = {
                // 配置title
               title:{
                   text:'▎商家分布',
                   top:'5%',
                   left:'5%'
               },
               legend:{
                   data:legendArr,
                   left:'5%',
                   bottom:'5%',
                   orient:'vertical'
               },
               series:seriesArr
            }
            this.chartInstance.setOption(dataOption)
        },
        // 实现屏幕适配
        /*
            1.监听窗口的大小的变化
            2.设置适配想数据
            3.调用echarts.resize()方法
        */
       screenAdapter(){
           const titleFontSize = this.$refs.ref_map.offsetWidth / 100 * 3.6;
           const adapterOption = {
                title:{
                    textStyle:{
                        fontSize:titleFontSize / 2
                    }
                },
                legend:{
                    itemWidth:titleFontSize / 2,
                    itemHeight:titleFontSize / 2,
                    itemGap:titleFontSize / 2,
                    textStyle:{
                        fontSize:titleFontSize / 2
                    }
                }
           }

            //设置数据
            this.chartInstance.setOption(adapterOption);
            this.chartInstance.resize();
        },
        //点击分类进行分类的切换
        handelChooseItem(currentType){
            this.currentChoose = currentType;
            this.updateChart();
            this.isSelect = false;
        },
        // 双击切换到china地图
        removeProvinMap(){
            const changeOtion = {
                geo:{
                    map:'china'
                }
            }
            this.chartInstance.setOption(changeOtion)
        }
    }
}
</script>
<style lang="less" scoped>

</style>